<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>弧形运动效果</title>
  <style type="text/css">
    body {
      margin: 0;
      background: #111;
      text-align: center;
    }

    h1 {
      font-size: 14px;
      font-family: "Microsoft Yahei";
      text-align: center;
    }

    .stage {
      width: 120px;
      height: auto;
      margin: 0 auto;
      position: relative;
      -webkit-transform-origin: center top;
      -webkit-transform: rotate(-30deg);
      -webkit-animation: sway 2.2s infinite alternate ease-in-out;
    }

    .watch {
      width: 100%;
      height: auto;
    }

    .seconds {
      position: absolute;
      width: 8%;
      height: auto;
      bottom: 11.5%;
      left: 45.5%;
      -webkit-transform-origin: center 72.4%;
      -webkit-animation: second 60s infinite linear;
    }

    @-webkit-keyframes second {
      to {
        -webkit-transform: rotate(355deg);
      }
    }

    @-webkit-keyframes sway {
      to {
        -webkit-transform: rotate(30deg);
      }
    }
  </style>
</head>
<body>
<h1>请使用webkit内核标准浏览器查看效果</h1>
<div class="stage">
  <img src="http://p0.qhimg.com/t0197c451833414523e.png" alt="钟表" class="watch"/>
  <img src="http://p9.qhimg.com/t0145f1ae8ad6753b05.png" alt="秒针" class="seconds">
</div>
</body>
</html>
